﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutAdmin.cshtml";
}

<div>
    <ul class="breadcrumb">
        <li>
            <a href="#">Trang chủ</a>
        </li>
        <li>
            <a href="#">Thanh điều khiển</a>
        </li>
    </ul>
</div>

<div class="row">
    <div class="box col-md-12">
        <div class="box-inner">
            <div class="box-header well" data-original-title="">
                <h2><i class="glyphicon glyphicon-user"></i> Danh sách tài khoản</h2>
            </div>

            <div class="box-content">
                <div class="alert alert-info">Hiển thị thông báo kết quả thêm/xóa/sửa</div>
                <div style="margin-bottom: 20px;">
                    <a href="#" title="Thêm mới" data-toggle="tooltip" class=" btn btn-info"><i class="glyphicon glyphicon-plus"></i> Thêm mới</a>
                </div>
                <table class="table table-striped table-bordered bootstrap-datatable datatable responsive ">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Date registered</th>
                            <th>Role</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>David R</td>
                            <td class="center">2012/01/01</td>
                            <td class="center">Member</td>
                            <td class="center">
                                <span class="label-success label label-default">Active</span>
                            </td>
                            <td class="center">
                                <a class="btn btn-success" href="#">
                                    <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                                    Chi tiết
                                </a>
                                <a class="btn btn-info " href="#">
                                    <i class=" glyphicon glyphicon-edit icon-white"></i>
                                    Cập nhật
                                </a>
                                <a class="btn btn-danger" data-href="David R" data-toggle="modal" data-target="#confirm-delete" href="#">
                                    <i class="glyphicon glyphicon-trash icon-white"></i>
                                    Xóa
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>Chris Jack</td>
                            <td class="center">2012/01/01</td>
                            <td class="center">Member</td>
                            <td class="center">
                                <span class="label-success label label-default">Active</span>
                            </td>
                            <td class="center">
                                <a class="btn btn-success" href="#">
                                    <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                                    Chi tiết
                                </a>
                                <a class="btn btn-info " href="#">
                                    <i class=" glyphicon glyphicon-edit icon-white"></i>
                                    Cập nhật
                                </a>
                                <a class="btn btn-danger" data-href="Chris Jack" data-toggle="modal" data-target="#confirm-delete" href="#">
                                    <i class="glyphicon glyphicon-trash icon-white"></i>
                                    Xóa
                                </a>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--/span-->
</div><!--/row-->

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
            </div>

            <div class="modal-body">
                <p>Bạn đang muốn xóa một tài khoản trong danh sách</p>
                <p>Bạn có muốn tiếp tục xóa không?</p>
                <p class="debug-url"></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Hủy</button>
                <a href="" class="btn btn-danger danger">Xóa</a>
            </div>
        </div>
    </div>
</div>



<script>
    $('#confirm-delete').on('show.bs.modal', function (e) {
        $(this).find('.danger').attr('href', $(e.relatedTarget).data('href'));

        $('.debug-url').html('Xóa tài khoản: <strong>' + $(this).find('.danger').attr('href') + '</strong>');
    })
</script>






<!--FOrm-->

<div class="row">
    <div class="box col-md-8 col-md-offset-2">
        <div class="box-inner">
            <div class="box-header well" data-original-title="">
                <h2><i class="glyphicon glyphicon-edit"></i> Form Elements</h2>
                <div class="box-icon">
                    <a href="#" class="btn btn-setting btn-round btn-default">
                        <i class="glyphicon glyphicon-cog"></i>
                    </a>
                    <a href="#" class="btn btn-minimize btn-round btn-default">
                        <i class="glyphicon glyphicon-chevron-up"></i>
                    </a>
                    <a href="#" class="btn btn-close btn-round btn-default">
                        <i class="glyphicon glyphicon-remove"></i>
                    </a>
                </div>
            </div>
            <div class="box-content">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputFile">File input</label>
                        <input type="file" id="exampleInputFile">
                        <p class="help-block">Example block-level help text here.</p>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Check me out
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
    </div>
    <!--/span-->
</div><!--/row-->
